<template>
  <view class="slides">

    <swiper
        class="swiper"
        :autoplay="true"
        :indicator-dots="true"
        :circular="true"
				id="productSlidesCom"
    >
      <swiper-item
          class="item"
          v-for="(slide, index) in slides"
          :key="index"
      >

        <view>
          <image
              class="slide"
              :src="slide.slide_url"
          ></image>
        </view>

      </swiper-item>

    </swiper>

  </view>
</template>

<script>
export default {
  name: "ProductSlidesCom",
  props: {
    slides: {
      type: Array,
      required: true
    }
  },
	data: () => ({
	  height:0
	}),
	mounted(){
		let _this = this;
		const query = uni.createSelectorQuery().in(this);
		query.select('#productSlidesCom').boundingClientRect(data => {
			_this.height = data.height
		}).exec();
		this.$emit('getSliderHeight',this.height)
	}
}
</script>

<style lang="scss" scoped>
.slides {
	width:100%;
	margin-top:58rpx;
  .swiper {
    width: 646rpx;
    height: 626rpx;
	margin:0 auto;
    .item {
      .slide {
        width: 646rpx;
        height: 626rpx;
      }
    }
  }
}
</style>
